<!--
 * @Description:取票码首页
 * @Author: Kerwin
 * @Date: 2025-04-27 17:30:11
 * @LastEditTime: 2025-05-30 12:01:39
 * @LastEditors:  Please set LastEditors
-->
<template>
  <view class="content">
    <view style="text-align: right; margin: 20rpx">
      <!-- 重新加载图标 -->
      <u-icon
        color="black"
        name="reload"
        size="40"
        @click="hanleGetQparr"
        style="cursor: pointer"
      ></u-icon>
    </view>
    <template v-if="qpArr.length > 0">
      <view
        class="item"
        v-for="qpItem in qpArr"
        :key="qpItem.id"
        @click="handleGoDetail(qpItem)"
      >
        <view class="item-l">
          <van-image
            width="100%"
            height="242rpx"
            :src="qpItem.orderThirdParty.posterUrl"
          />
        </view>
        <view class="item-r">
          <view class="nr">
            <view class="bt overwz">{{
              qpItem.orderThirdParty.cinemaName
            }}</view>
            <view class="xq">
              <view style="margin-bottom: 10rpx">{{
                qpItem.orderThirdParty.movieName
              }}</view>
              <view style="margin-bottom: 50rpx">{{
                qpItem.orderThirdParty.showTime
              }}</view>
              <view style="margin-bottom: 10rpx">
                <text class="hswz">共</text>
                <text style="margin: 0 15rpx; font-size: 28rpx">{{
                  qpItem.orderProductSkus.length
                }}</text>
                <text class="hswz">张</text>
                <view
                  style="
                    text-align: right;
                    font-size: 24rpx;
                    padding-bottom: 10rpx;
                  "
                >
                  购买时间：{{ formatTimestamp(qpItem.createTime) }}</view
                >
              </view>
            </view>
          </view>
          <!-- 已放映图片 -->
          <view class="fybox">
            <u-image
              v-if="qpItem.isfy == true"
              src="../../static/yfy.png"
              width="80rpx"
              height="80rpx"
            ></u-image>
          </view>
        </view>
      </view>
      <!-- 返回顶部按钮 -->
      <u-back-top :scroll-top="scrollTop"></u-back-top>
    </template>
    <view v-else style="color: #999; text-align: center; font-size: 32rpx"
      >暂无可取的票</view
    >
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useUserStore, useMovieStore } from '@/store'
import { onLoad, onShow, onReady, onPageScroll } from '@dcloudio/uni-app'
import { baseApi, productApi, orderApi } from '@/api'
import { formatTimestamp, dateFormat } from '@/utils/index'
import { calculateStopShowTime } from '../../components/movieUtil'
const movieStore = useMovieStore()
const userStore = useUserStore()
const scrollTop = ref(0)
const qpArr = ref<any>([])
// 获取取票列表
const hanleGetQparr = async () => {
  const nowTime = new Date() // 获取当前时间
  uni.showLoading({ title: '加载中', mask: true })
  try {
    let tempObj = {
      pageIndex: 1,
      detail: true,
      statuses: 60,
      userId: userStore.userInfo.id,
      otherColumns: 'user',
      integralsRuleId: 7,
      shopMode: JSON.parse(uni.getStorageSync('hyType')).id
    }
    const { data } = await orderApi.orderList(tempObj).finally(() => {
      uni.hideLoading()
    })
    qpArr.value = data.records.map((ele: any) => {
      // 计算散场时间
      const stopShowTimeStr = calculateStopShowTime(
        ele.orderThirdParty.showTime,
        ele.orderThirdParty.duration
      )
      // 将字符串转换为 Date 对象进行比较
      const stopShowTime = new Date(stopShowTimeStr.replace(' ', 'T'))
      const isfy = nowTime > stopShowTime ? true : false
      return {
        ...ele,
        isfy
      }
    })
    // console.log('获取取票列表', data)
    // console.log('qpArr', qpArr.value)
  } catch (e) {
    console.log('获取取票列表错误')
  }
}
onShow(() => {
  hanleGetQparr()
})

// 跳转去取票
const handleGoDetail = (qpItem: any) => {
  // console.log('qp', qpItem)
  movieStore.setSelectedOrder(qpItem)
  uni.navigateTo({ url: `/packageF/pages/ticketCodeDetails/index` })
}
//返回顶部,所在的父盒子不能设置高度
onPageScroll((e: any) => {
  scrollTop.value = e.scrollTop
})
</script>

<style lang="scss" scoped>
.content {
  margin-top: 20rpx;
  .item {
    width: 702rpx;
    height: 298rpx;
    background: #ffffff;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    margin: 0 auto;
    margin-bottom: 20rpx;
    .item-l {
      width: 162rpx;
      height: 242rpx;
      // border: 1rpx solid #dbdbdbdb;
      border-radius: 16rpx;
      margin-right: 20rpx;
    }
    .item-r {
      position: relative;
      flex-grow: 1;
      height: 252rpx;
      display: flex;
      align-items: center;
      font-size: 24rpx;
      .nr {
        height: 100%;
        width: 0rpx;
        flex-grow: 1;
        margin-right: 20rpx;
        .bt {
          font-size: 32rpx;
          color: #000;
          font-weight: bold;
          margin-bottom: 20rpx;
        }
        .xq {
          color: #000;
          font-size: 24rpx;
        }
      }
      .fybox {
        position: absolute;
        top: 50rpx;
        right: 0rpx;
      }
    }
  }
}
.hswz {
  color: #999;
  font-size: 24rpx;
}
.overwz {
  //   单行文本省略号
  width: 100%;
  white-space: nowrap; /* 禁止文本换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 用省略号表示被截断的文本 */
}
</style>
